import React from 'react'

const Edit = () => {
  // 接受传递的参数
  let [searchParams] = React.Router.useSearchParams()
  let [id, SetID] = React.useState(searchParams.get('id') ? searchParams.get('id') : 0)
  let [guest, SetGuest] = React.useState({})
  let [form] = React.UI.Form.useForm()

  // 请求住客信息
  const request = async () => {
    //组装数据
    var data = {
      id,
      busid: React.Business.id
    }

    //发起请求
    var result = await React.HTTP.post('/guest/info', data)

    if (result.code == 0) {
      React.error(result.msg)
      return false
    } else {
      // 输出默认信息
      SetGuest(result.data)

      //重置表单的数据值
      form.setFieldsValue(result.data)
    }
  }

  //修改方法
  const edit = async (values: any) => {
    values.busid = React.Business.id
    values.id = id

    var result = await React.HTTP.post('/guest/edit', values)

    if (result.code) {
      React.success(result.msg)
    } else {
      React.error(result.msg, () => { })
    }
  }

  // 一进来处罚钩子函数
  React.useEffect(() => {
    request()
  }, [])

  return (
    <>
      {/* 表单结构 */}
      <React.UI.Form
        form={form}
        initialValues={guest}
        onFinish={edit}
        name="edit"
        footer={
          <React.UI.Button block type='submit' color='primary' size='large'>
            提交修改
          </React.UI.Button>
        }
      >
        <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
          <React.UI.Input placeholder="请输入昵称" />
        </React.UI.Form.Item>

        <React.UI.Form.Item name='mobile' label='手机号' rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
          <React.UI.Input placeholder='请输入手机号' />
        </React.UI.Form.Item>

        <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
          <React.UI.Radio.Group>
            <React.UI.Space direction='horizontal'>
              <React.UI.Radio value='0'>女</React.UI.Radio>
              <React.UI.Radio value='1'>男</React.UI.Radio>
            </React.UI.Space>
          </React.UI.Radio.Group>
        </React.UI.Form.Item>

      </React.UI.Form>
    </>
  )
}

export default Edit
